import {ElMessage} from "element-plus";
import ArkForm from "../ark-form/ArkForm.vue";
import {ArkFormOptions, FormItem, LayoutMode} from "../ark-form/ArkFormOptions";
import ArkInteractionType from "../../common-type/ark-interaction-type";
import dayjs from "dayjs";
import ArkTipType from "../../common-type/ark-tip-type";

export default {
  title: 'ark-component-v2/ArkForm',
  component: ArkForm,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue3、v3-easyui、typescript、lodash、scss、element-plus、tailwindcss、jquery、dayjs、ArkFormInteraction、ArkInteractionType、ArkTooltip、ArkIconFont</span> 使用`
      }
    }
  },
  argTypes: {
    options: {description: 'ArkFormOptions'},
    default: {description: '表单内容部分'},
    '\'formItem-\' + item.prop': {description: '表单项内容部分，参数为model、formItem'},
    '\'formItemLabel-\' + item.prop': {description: '表单项名称部分，参数为model、formItem'},
    '\'formItemInteraction-\' + item.prop': {description: '表单项组件部分，参数为model、formItem'},
  }
};

export const Basic = {
  name: '基本使用',
  render: (args: ArkFormOptions) => ({
    components: {ArkForm},
    setup() {
      return {args};
    },
    template: `
      <ArkForm v-model:options="args.options"/>`,
  }),
  args: {
    options: {
      layout: {
        mode: LayoutMode.GRID,
        column: 2
      },
      delimiter: '：',
      formItems: [
        {
          label: (model: Readonly<Record<string, any>>) => {
            console.log('label', model)
            return '姓名'
          },
          prop: 'name',
          value: '张三',
          tip: {
            title: '提示标题',
            content: '提示内容',
            type: ArkTipType.WARNING,
          },
          show: true,
          disabled: true,
          span: 2,
          rule: (params: { [propName: string]: any }) => {
            console.log('rule', params)
            return {required: true, message: '姓名不能为空'}
          },
          interaction: {
            width: '100%'
          }
        },
        {
          label: '性别',
          prop: 'sex',
          value: 'nan',
          interaction: {
            type: ArkInteractionType.RADIO,
            options: [
              {text: '男', value: 'nan'},
              {text: '女', value: 'nv'},
            ],
          }
        },
        {
          label: '角色',
          prop: 'role',
          value: '',
          interaction: {
            type: ArkInteractionType.SELECT,
            options: () => {
              return Promise.resolve([
                {text: '管理员', value: 'admin'},
                {text: '医生', value: 'docter'},
                {text: '老师', value: 'teacher'},
                {text: '学生', value: 'student'},
              ])
            },
            extraAllOptionForAsync: true
          }
        },
        {
          label: '备注',
          prop: 'remark',
          span: 2,
          interaction: {
            type: ArkInteractionType.TEXT_AREA,
            rows: 10,
            width: '100%'
          }
        },
        {
          label: '年龄',
          prop: 'age',
          value: 10,
          interaction: {
            type: ArkInteractionType.NUMBER,
            min: 0,
            max: 100,
            step: 10
          }
        },
        {
          label: '系统',
          prop: 'system',
          value: 'STORYBOOK',
          interaction: {
            type: ArkInteractionType.READONLY_TEXT,
            transform: (val: any) => {
              console.log('transform', val)
              return `${val}系统`
            }
          }
        },
        {
          label: '日期',
          prop: 'date',
          value: dayjs().format('YYYY-MM-DD'),
          interaction: {
            type: ArkInteractionType.DATE,
            valueFormat: 'YYYY-MM-DD',
            showFormat: 'YYYY~MM~DD',
          }
        },
      ],
      onFormItemEnter: (formItem: FormItem) => {
        ElMessage({
          message: '表单项回车操作，参数请看控制台打印',
          type: 'success',
        });
        console.log(formItem)
      },
    }
  },
};